<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <title></title>
    <style>
        section {
            height: 2000px;
        }
        
        .one {
            width: 100px;
            height: 50px;
            position: fixed;
            right: 0;
            top: 300px;
        }
        
        .two {
            width: 100px;
            height: 50px;
            position: fixed;
            right: 0;
            top: 350px;
        }
        
        div {
            background-image: url(scroll.png);
            background-size: 100% 300%;
            width: 20px;
            height: 50px;
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 0;
        }
        
        span {
            width: 100px;
            height: 50px;
            position: absolute;
            line-height: 50px;
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
            text-align: center;
            color: white;
            display: none;
            cursor: pointer;
        }
        
        .first {    
            background-position: 0 0;
        }
        
        .firstC {
            background-color: #d03f42;
        }
        
        .second {
            background-position: 0 -200%;
        }
        
        .secondC {
            background-color: #383838;
        }
    </style>
</head>

<body>
    <section>
        <main class="one">
            <div class="first">

            </div>
        <span class="firstC">
         返回顶部
        </span>
        </main>

         <main class="two">
            <div class="second">

            </div>
        <span class="secondC">
        转到底部
        </span>
        </main>

    </section>

</body>

</html>
<script>
    $('main').hover(function () {
        console.log('111');
        $(this).find('div').hide().siblings().show();

    }, function () {
        $(this).find('div').show().siblings().hide();
    });

    //点击返回顶部的滚动动画
    $(".firstC").click(function () {

        $('body').stop().animate({
            // 设置垂直滚动条位置：
            scrollTop: 0
        }, 700);
    });

    //点击转到底部的滚动动画
    $(".secondC").click(function () {

        //   document.body.clientHeight 内容区域高度
        $('body').stop().animate({
            // 设置垂直滚动条位置：
            scrollTop: document.body.clientHeight
        }, 700);
    });

</script>